<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { PostMemberAddressData } from '@/types/address'
import { postMemberAddress, getMemberAddressById, putMemberAddressById } from '@/api/address'
import { ref } from 'vue'

// 定义参数对象
const form = ref({ isDefault: 0 } as PostMemberAddressData)
// 定义 id
const addressId = ref('')
onLoad(async({ id }) => {
  uni.setNavigationBarTitle({
    title: id ? '修改地址' : '新建地址',
  })
  if(id) {
    // 保存 id
    addressId.value = id
    // 发送请求到服务器得到地址的详情
    const res = await getMemberAddressById(id)
    // 将收货地址文本信息保存起来
    fullLocationWord.value = res.fullLocation
    // 将接口返回的信息合并到 form 中
    Object.assign(form.value, res)
  }
})
// 定义显示在页面上的地址变量
const fullLocationWord = ref('')
// 注册组件数据变更事件
const fullLocationChange = (e: WechatMiniprogram.PickerChange) => {
  const [ provinceCode, cityCode, countyCode ] = e.detail.code
  form.value.provinceCode = provinceCode
  form.value.cityCode = cityCode
  form.value.countyCode = cityCode
  // 保存地址
  fullLocationWord.value = (e.detail.value as string[]).join(' ')
}
// 注册修改默认地址事件
const isDefaultChange = (e: WechatMiniprogram.SwitchChange | Event) => {
  // 根据得到值给 isDefault 赋值
  form.value.isDefault = (e as WechatMiniprogram.SwitchChange).detail.value ? 0 : 1
}
const subitForm = async() => {
  addressId.value
  ? await putMemberAddressById(addressId.value, form.value)
  : await postMemberAddress(form.value)
  uni.showToast({ title: addressId ? '修改成功' : '新增成功' })
  // 回到上一个页面
  setTimeout(() => uni.navigateBack({}), 500)
}
</script>

<template>
  <view class="viewport">
    <!-- 地址信息 -->
    <view class="form">
      <view class="form-item">
        <text class="label">姓名</text>
        <input placeholder-style="color: #888" placeholder="请填写收货人姓名" v-model="form.receiver" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input placeholder-style="color: #888" placeholder="请填写收货人手机号码" v-model="form.contact" />
      </view>
      <view class="form-item">
        <text class="label">省/市/县 (区)</text>
        <picker mode="region" @change="fullLocationChange">
          <view v-if="fullLocationWord" class="region">{{ fullLocationWord }}</view>
          <view v-else class="placeholder">请填写收货人所在城市</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input placeholder-style="color: #888" placeholder="街道、楼牌号信息" v-model="form.address" />
      </view>
      <view class="form-item">
        <text class="label">设置默认地址</text>
        <switch color="#27ba9b" :checked="!form.isDefault" @change="isDefaultChange" />
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="button" @tap="subitForm">{{ addressId ? '保 存' : '新 增' }}</view>
  </view>
</template>

<style>
page {
  background-color: #f4f4f4;
}

.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.form .form-item {
  display: flex;
  min-height: 96rpx;
  line-height: 46rpx;
  padding: 25rpx 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
}

.form .form-item:last-child {
  border: none;
}

.form .form-item .label {
  width: 200rpx;
  color: #333;
}

.form .form-item input {
  flex: 1;
  display: block;
  height: 46rpx;
}

.form .form-item switch {
  position: absolute;
  right: -10rpx;
  transform: scale(0.7) translateY(-8px);
}

.form .form-item picker {
  flex: 1;
}

.form .form-item .region {
  color: #333;
}

.form .form-item .placeholder {
  color: #888;
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
